<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel='stylesheet' href='stylesheets/bootstrap.css'/>
    <link rel='stylesheet' href='stylesheets/bootstrap-docs.css'/>
    <link rel='stylesheet' href='stylesheets/common.css'/>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation" id="mainNav">
    <a class="navbar-brand" href="#">Planning Tool</a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/TODO">Home</a></li>
            <li><a href="/TODO">My Lectures</a></li>
            <li><a href="/TODO">My Practicals</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false"><%= username %><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/TODO">My Profile</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="/TODO">Log out</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="container bs-docs-container">
    <div class="col-md-8 col-md-offset-2">
        <div class="bs-docs-section no-intent">
            <p><a href="/TODO">Link1</a><span class="glyphicon glyphicon-chevron-right"></span><a href="/TODO">Link2</a>
            </p>
            <h1>Lecture</h1>
            <hr class="divider">
            <br>
            <div class="float-right">
                <a class="btn btn-default" href="/TODO">Manage</a>
            </div>
            <p>Collaborators: <a href="/TODO">A User</a>, <a href="/TODO">B User</a></p>
            <div class="float-clear"></div>
            <hr class="divider">
            <br>
            <div style="float: right">
                <a class="btn btn-primary" href="/TODO">Edit</a>
            </div>
            <div style="clear: right"></div>
            <p>Weeks: to </p>
            <p>Days: </p>
            <p>Time: to </p>
            <p>Room: </p>
            <p></p>

            <hr class="divider">
            <br>
            <div class="float-right">
                <a class="btn btn-default" href="/TODO">Manage</a>
            </div>
            <p>Practicals:</p>
            <div class="three-element-per-row height-150px panel panel-success fix-height">
                <div class="panel-heading">
                    <h3 class="panel-title no-warp">Title</h3>
                </div>
                <div class="panel-body">
                    Contents....fdsfdsf sdfwefsvcvdgerewdsfsafwaewecvsdfsdfewoppppppppppppppppkmvgbdgepormgopxjvmiodesfjgegskogriogjm;rmgldfkm,v;pxcmjkviopdsjkgpogignjiodfosfmoilnjviogedjgfpowefkpoewmfkwfji
                </div>
            </div>
            <div class="three-element-per-row height-150px panel panel-success fix-height">
                <div class="panel-heading">
                    <h3 class="panel-title no-warp">Title</h3>
                </div>
                <div class="panel-body">
                    Contents....
                </div>
            </div>
            <div class="three-element-per-row height-150px panel panel-success fix-height">
                <div class="panel-heading">
                    <h3 class="panel-title no-warp">Title</h3>
                </div>
                <div class="panel-body">
                    Contents....
                </div>
            </div>
            <div class="three-element-per-row height-150px panel panel-success fix-height">
                <div class="panel-heading">
                    <h3 class="panel-title no-warp">Title</h3>
                </div>
                <div class="panel-body">
                    Contents....
                </div>
            </div>
            <div class="three-element-per-row height-150px panel panel-success fix-height">
                <div class="panel-heading">
                    <h3 class="panel-title no-warp">Title</h3>
                </div>
                <div class="panel-body">
                    Contents....
                </div>
            </div>
            <div class="float-clear"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="javascripts/jquery-3.2.1.js"></script>
<script type="text/javascript" src="javascripts/bootstrap.js"></script>
</body>
</html>